<template>
	<view class="content">
		<view class="top-bar">
			<view class="top-bar-left" @click="backOne">
				<image src="../../static/img/common/back.png" mode=""></image>
			</view>
			<view class="top-bar-right" @tap="ToUserdetai">
				<image src="../../static/img/userhome/more.png" mode=""></image>
			</view>
		</view>
		<view class="main">
			<view class="avatar" :style="'margin-top:'+top+'rpx'">
				<image :src="user.avatar" :animation="animationData1" class="img"
					:style="'border-radius:'+border+'rpx'"></image>
				<view class="sex man" v-if="user.sex==1&&isAdd==false">
					<i class="iconfont icon-man"></i>
				</view>
				<view class="sex woman" v-if="user.sex==2&&isAdd==false">
					<i class="iconfont icon-woman"></i>
				</view>
			</view>
			<view class="user">
				<view class="name">
					{{user.name}}
				</view>
				<view class="nicheng">
					邮箱：{{user.email}}
				</view>
			</view>
			<view class="description">
				{{user.explain}}
			</view>
			<!-- 	<view class="add">
				加为好友
			</view> -->
		</view>
		<view class="bottom-bar">
			<view class="bottom-btn" @tap="addAnimation" v-if="!flag">
				加为好友
			</view>
		</view>
		<view class="bg">
			<view class="bg-bai" :animation="animationData2">

			</view>
			<image :src="user.avatar" mode="aspectFill" class="bg-img"></image>
		</view>
		<view class="add-msg" :animation="animationData">
			<view class="name">
				{{user.name}}
			</view>
			<textarea maxlength="120" v-model="msg" class="add-main"></textarea>
			<view class="add-bt" :animation="animationData">
				<view class="cancel" @tap="addAnimation">
					取消
				</view>
				<view class="send" @tap="send">
					发送
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import animation from '../../common/js/animation.js'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				user: {},
				animationData: {},
				animationData1: {},
				animationData2: {},
				isAdd: false,
				top: 56,
				border: 48,
				uid: '',
				flag: false,
				msg:''
			};
		},
		methods: {
			backOne() {
				uni.navigateBack()
			},
			addAnimation() {
				this.isAdd = !this.isAdd
				let windowinfo = uni.getWindowInfo()
				var width = windowinfo.windowWidth
				var height = windowinfo.windowHeight
				var rpx = width / 750
				var top = Math.ceil(height / rpx * 0.25 - windowinfo.statusBarHeight / rpx)
				if (this.isAdd) {
					this.top = top - 88 - 120
					// console.log(this.top);
					animation((a) => {
						a.bottom(0).step();
						this.animationData = a.export()
					})
					animation(a => {
						a.width('240rpx').height('240rpx').step()
						this.animationData1 = a.export()
					})
					animation(a => {
						a.backgroundColor('#FFE431').step()
						this.animationData2 = a.export()
					})
				} else {
					this.top = 56
					animation((a) => {
						a.bottom('-100%').step();
						this.animationData = a.export()
					})
					animation(a => {
						a.width('400rpx').height('400rpx').step()
						this.animationData1 = a.export()
					})
					animation(a => {
						a.backgroundColor('transparent').step()
						this.animationData2 = a.export()
					})
				}
			},
			isfriend() {
				this.FriendList.forEach(item => {
					if (item._id == this.uid) {
						this.flag = true
					}
				})
			},
			async getuser() {
				var {
					data
				} = await this.request({
					url: '/user',
					data: {
						id: this.uid
					}
				})
				console.log(data);
				if (data.status === 200) {
					this.user = data.data
				}
			},
			async send() {
				this.addAnimation()
				var {
					data
				} = await this.request({
					url: '/friend/add',
					method: "POST",
					data: {
						uid: this.id,
						fid: this.uid,
						msg: this.msg
					}
				})
				if (data.status == 200) {
					setTimeout(() => {
						uni.showToast({
							title: "好友请求已发送"
						})
					}, 1500)

				}
			},
			ToUserdetai() {
				uni.navigateTo({
					url: '/pages/userdetai/userdetai?id='+this.uid,
				})
			}
		},
		onLoad(e) {
			this.uid = e.id
			this.isfriend()
			this.getuser()
			this.msg = this.username+"请求添加你为好友~"
		},
		computed: {
			...mapState([
				'FriendList', "id","username"
			])
		}

	}
</script>

<style lang="scss" scoped>
	@import "../../common/css/base.scss";

	.top-bar {
		@include top-bar(transparent, none);

		.top-bar-left {
			padding: 0;
			padding-top: 20rpx;
			box-sizing: border-box;

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.top-bar-right {
			padding: 38rpx 0;

			image {
				width: 52rpx;
				height: 12rpx;
			}
		}
	}

	.main {
		padding-top: 88rpx;

		// position: relative ;
		.avatar {
			margin: 0rpx 170rpx 48rpx 168rpx;
			// background-color: red;
			position: relative;
			max-width: 412rpx;
			max-height: 412rpx;

			// z-index: 10;
			image {
				z-index: 10;
				width: 400rpx;
				height: 400rpx;
				border: 6rpx solid #FFFFFF;
				// border-radius: 48rpx;
			}

			.sex {
				z-index: 11;
				position: absolute;
				bottom: 22rpx;
				right: 22rpx;
				width: 64rpx;
				height: 64rpx;
				background: #FF5D5B;
				border-radius: 56rpx;
				text-align: center;
				line-height: 64rpx;
				font-size: 32rpx;
				color: #FFF;
			}

			.man {
				background: #87CEEB;
			}

			.woman {
				background: #FF5D5B;
			}
		}

		.user {
			text-align: center;
			margin-bottom: 20rpx;

			.name {
				font-size: 52rpx;
				color: #272832;
				font-weight: 400;
			}

			.nicheng {
				font-size: 28rpx;
				color: #272832;
				font-weight: 400;
			}
		}

		.description {
			width: 552rpx;
			height: 170rpx;
			font-size: 28rpx;
			color: #272832;
			font-weight: 200;
			margin: 0 auto;
		}
	}

	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -2;

		.bg-bai {
			width: 100%;
			height: 100%;
		}

		.bg-img {
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			height: 100%;
			width: 100%;
			filter: blur(16px);
			opacity: 0.4;
			z-index: -1;
		}
	}

	.bottom-bar {
		@include bottom-bar()
	}

	.add-msg {
		position: fixed;
		bottom: -100%;
		width: 100%;
		height: 75vh;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0 0;
		box-sizing: border-box;
		padding: 0 56rpx;

		.name {
			padding: 168rpx 0 40rpx;
			font-size: 52rpx;
			color: #272832;
			line-height: 74rpx;
		}

		.add-main {
			box-sizing: border-box;
			width: 100%;
			height: 420rpx;
			background: #F3F4F6;
			border-radius: 20rpx;
			padding: 18rpx 22rpx;
			font-size: 32rpx;
			color: #272832;
			font-weight: 400;
			line-height: 44rpx;
		}

		.add-bt {
			position: fixed;
			bottom: -100%;
			left: 0;
			padding: 12rpx 32rpx;
			width: 100%;
			box-sizing: border-box;
			height: 104rpx;
			display: flex;

			.cancel {
				width: 172rpx;
				height: 80rpx;
				background: rgba(39, 40, 50, 0.10);
				border-radius: 10rpx;
				text-align: center;
				line-height: 80rpx;
			}

			.send {
				margin-left: 32rpx;
				flex: 1;
				height: 80rpx;
				background: #FFE431;
				border-radius: 10rpx;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
</style>
